<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>班级作业</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{position: relative; z-index: 6; height: 50px; top:0; background:#fff; }
.g-back{ position: absolute;left: 0;top:0; width: 50px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{position: absolute;right: 0;top:0; width: 50px; height: 50px;line-height: 50px; color:#3095fd; font-size: 14px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择项*/
.page-wrap{position: absolute;top:0;left: 0; padding-top: 50px; height: 100%; width: 100%; background:#f8f8f8;overflow: hidden;overflow-y: auto; }

/*通知详情*/
#xiangqing {position: absolute;width: 100%;  top:0; left:0; /* display: none; */ }
#xiangqing .xiangqing{width: 100%; overflow:hidden; }
#xiangqing h2{ text-align: center; margin:10px 0; font-weight: 600; }
#xiangqing p{ width: 90%; margin: 10px auto; padding:10px; border-radius: 5px; background: #fff; }
#xiangqing h4{ padding:5px 0 5px 15px; background: #ccc; color:#f0874f; font-size: 14px; }
#xiangqing ul{ padding:15px; overflow: hidden; }
#xiangqing ul li{ float:left; margin-bottom: 10px; width: 20%; min-width: 56px;  }
#xiangqing .img{display: block;margin:0 auto; width:50px;height: 50px; border-radius: 50%;
 background: url(../img/t5.png) no-repeat; background-size: 50px;}
#xiangqing .name{display: block; text-align: center; font-size: 12px; color:#666; }
</style>
</head>
<body>
<div class="page-container" id="xiangqing">
         <!-- 头部 -->
          <div class=" page-top">
                  <a class="g-back" href="javascript:history.back();"></a>                   
                  <span class="t-title">作业详情</span>  
                  <a  class="g-other"></a>
          </div>
          <!-- 内容区 -->
          <div class="page-wrap" >
                <div class="xiangqing">
                      <h2>作业1</h2>
                      <p>asdfsdfxcvcxvcxvcxvasdfvxcvcx</p>
                      <h4>未读学生</h4>
                      <ul>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                      </ul>
                      <h4>未交作业学生</h4>
                      <ul>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                      </ul>
                </div>
          </div>
</div>
</body>
</html>